<script setup>
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useRouter } from 'vue-router'
import _ from 'lodash'
const router = useRouter()

import TopPart from '../components/TopPart.vue'
import weatherChart from '../components/WeatherChart.vue'

import { useWeatherStore } from '@/stores/weather'
const { inputCity, adcode, cityList, noCity, LocalCityData } = storeToRefs(useWeatherStore())
const { getInputData, getInputCityData, deleteCity } = useWeatherStore()

const data = ref('')

const showList = ref(false)


const handleInput = () => {
  if (data.value.length > 0) {
    showList.value = true
    getInputData(data.value.trim())
  } else {
    showList.value = false
  }
}
// 防抖函数
const handleInputDebounce = _.debounce(handleInput, 500)

const handleCheck = (id) => {
  getInputCityData(id)
  router.push({ name: 'city', query: { adcode: id, name: inputCity.value } })
}
const count = ref(null)

const handleOver = (id) => {
  count.value = id
}
const handleOut = () => {
  count.value = ''
}
const load = () => {
  cityList
}
</script>

<template>
  <div class="flex flex-col min-h-screen bg-weather-primary">
    <TopPart />
    <div class="container text-white">
      <div class="pt-4 mb-8 relative">
        <input
          type="text"
          class="py-2 px-1 w-full bg-transparent focus:outline-none focus:border-weather-secondary focus:shadow-md"
          placeholder="请输入城市名称"
          v-model="data"
          @input="handleInputDebounce"
        />
        <ul
          class="bg-weather-secondary text-white w-full shadow-md py-2 px-1 mt-2"
          v-if="showList && data.length > 0"
        >
          <p v-if="noCity">似乎没有找到你查找的城市！</p>
          <li v-if="data" @click="handleCheck(adcode)" class="cursor-pointer">{{ inputCity }}</li>
        </ul>
      </div>
      <div class="cityList">
        <h2 class="text-center duration-200" v-if="!cityList.length">
          暂时没有保存过城市天气信息，请查询后点击右上角"+"号保存。
        </h2>

        <div
          class="mt-10 max-h-[280px] hover:scrollbar-thumb-blue-300"
          :class="{ 'overflow-y-scroll scrollbar-thin ': cityList.length > 5 }"
          v-if="cityList.length && !data"
          v-infinite-scroll="load"
          >
          <!-- v-infinite-scroll 当保存的城市数量超过5个时，开启滚动条 -->
          <div
            class="flex justify-between"
            v-for="item in cityList"
            :key="item.id"
            @mouseover="handleOver(item.id)"
            @mouseout="handleOut(item.id)"
          >
            <div
              class="mb-4 bg-weather-secondary py-2 px-4 flex justify-between cursor-pointer w-full duration-300"
              :style="{ width: count === item.id ? 'calc(80% - 1rem)' : '100%' }"
            >
              <h3>{{ item.name }}</h3>
              <span>{{ item.temperature }}度</span>
            </div>

            <div class="flex mb-4 gap-2" v-show="count == item.id">
              <button class="bg-yellow-500 text-center w-[80px]" @click="handleCheck(item.id)">
                查看
              </button>
              <button class="bg-yellow-500 text-center w-[80px]" @click="deleteCity(item.id)">
                删除
              </button>
            </div>
          </div>
        </div>
      </div>
      <h2>{{ LocalCityData.city }}: 近期天气</h2>
      <weatherChart />
    </div>
  </div>
</template>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
input {
  border-bottom: 1px solid #fff;
}
input:focus {
  border-bottom-color: transparent;
}
</style>
